﻿
<div class="content-wrapper">
    <section class="content-header">
        <h1>
            报警查看
            <small>评分</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
            <li><a href="#">报警查看</a></li>
            <li class="active">评分</li>
        </ol>
    </section>
    <section class="content">
        <div class="row">
            <div class="pull-right" style="padding:10px">
                <a class="btn btn-primary" href="/DeviceAlarmGrade/Index"><i class="fa fa-undo"></i>返回</a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="box">
                    <div class="box-body">
                        <div id="echart" style="width:100%; height: 300px;">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-8">
                <div class="box">
                    <div class="box-body">
                        <div class="input-group">
                            <span class="input-group-addon">日期范围</span>
                            <input type="text" v-model="datemin" ref="datemin" id="datemin" class="form-control" style="width:120px;">
                            <input type="text" v-model="datemax" ref="datemax" id="datemax" class="form-control" style="width:120px;">
                        </div>
                        <div id="toolbar" class="btn-group">
                            <button id="btn_search" v-on:click="searchL" type="button" class="btn btn-default">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
                            </button>
                        </div>
                        <input type="hidden" ref="ClientID" id="ClientID" value="@ViewBag.ClientID" />
                        <table id="bootstraptable" class="table table-bordered text-nowrap table-hover"></table>
                    </div>
                </div>
            </div>

        </div>
    </section>
</div>
@section styles{
    <style>
        .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            display:none
        }
    </style>
    
}
@section scripts{
    <script type="text/javascript">

        var app = new Vue({
            el: '#app',
            data: {
                datemin: '@ViewBag.DateMin',
                datemax: '@ViewBag.DateMax',
                ClientID: '',
                url: '/DeviceAlarmGrade/DetailsEchart',
                seriesData: []
            },
            mounted: function () {
                var _self = this;
                _self.$nextTick(function () {
                    //显示active
                    _self.$refs.DeviceAlarmGrade.parentNode.parentNode.classList.add("active");
                    _self.$refs.DeviceAlarmGrade.classList.add("active");

                    //_self.datemin = _self.getCurrentMonthFirst();
                    //_self.datemax = _self.getCurrentMonthLast();
                    $('#datemin').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    $('#datemax').datetimepicker({
                        format: 'yyyy-mm-dd',
                        minView: 2,
                        autoclose: true,
                        language: "zh-CN"
                    });
                    setTimeout(function () {
                        _self.loadL();
                        setDataCardView("#bootstraptable");
                        _self.echartL();
                        //$("div[class='pull-right search']")[0].children[0].setAttribute("placeholder", "设备名称");
                    }, 500);
                });
            },
            methods: {
                loadL: function () {
                    _self = this;

                    var obj = [{
                        field: 'no',
                        title: '#',
                        formatter: function (value, row, index) {
                            var options = $('#bootstraptable').bootstrapTable('getOptions');
                            return index + 1;
                        }
                    }, {
                        field: 'DeviceName',
                        title: '设备名称',
                        align: 'center',
                        sortable: true
                    }, {
                        field: 'AlarmCount',
                        title: '报警数',
                        align: 'center'
                        }
                    ];
                    _self.ClientID = _self.$refs.ClientID.value;
                    yui.tableMini("bootstraptable", "/DeviceAlarmGrade/DetailsList?ClientID=" + _self.ClientID + "", obj, "POST", "ClientID");

                },
                echartL: function () {
                    var _self = this;
                    _self.seriesData = [];
                    var data = {
                        datemin: _self.$refs.datemin.value,
                        datemax: _self.$refs.datemax.value
                    };
                    _self.ClientID = _self.$refs.ClientID.value;
                    yui.$axiospostform(_self.url + '?ClientID=' + _self.ClientID + '', data).then(function (response) {
                        var res = response.data;
                        if (res.length > 0) {
                            for (var item in res) {
                                _self.seriesData.push({
                                    value: res[item].AlarmCount,
                                    name: res[item].DeviceName
                                });
                            }
                        }
                        var echart = echarts.init(document.getElementById('echart'));
                        var option = {
                            tooltip: {
                                trigger: 'item',
                                formatter: '{a} <br/>{b}: {c} ({d}%)'
                            },
                            series: [
                                {
                                    name: '访问来源',
                                    type: 'pie',
                                    radius: ['40%', '70%'],
                                    center: ['50%', '55%'],
                                    label: {
                                        formatter: '{b}:{d}%'
                                    },
                                    data: _self.seriesData,
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        echart.setOption(option);
                    }).catch(function (error) {
                        console.info(error);
                    })
                },
                searchL: function () {
                    $("#bootstraptable").bootstrapTable('refresh');
                    this.echartL();
                }
            }
        });
    </script>
}